<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>编辑图书</title>
    <!-- 引入jQuery -->
    <script src="/js/jquery-3.6.4.js"></script>
    <style>
        body {
            font-family: '微软雅黑', Arial, sans-serif;
            background-color: #f4f4f4;
            padding: 20px;
        }
        .container {
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            max-width: 800px;
            margin: 50px auto;
        }
        h1 {
            text-align: center;
        }
        .form-control {
            margin-bottom: 15px;
        }
        #updateBookButton {
            margin-top: 20px;
            background-color: #28a745;
            border: none;
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        #updateBookButton:hover {
            background-color: #1e7e34;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>编辑图书</h1>
    <!-- 使用表单来显示和编辑图书信息 -->
    <form id="editBookForm">
        <input type="hidden" id="bookId" name="bookId">
        <div>
            <label for="bookName" class="form-label">书名</label>
            <input type="text" class="form-control" id="bookName" name="bookName" required>
        </div>
        <div>
            <label for="bookPhoto" class="form-label">封面图片</label>
            <input type="text" class="form-control" id="bookPhoto" name="bookPhoto">
        </div>
        <div>
            <label for="category" class="form-label">分类</label>
            <input type="text" class="form-control" id="category" name="category" required>
        </div>
        <div>
            <label for="author" class="form-label">作者</label>
            <input type="text" class="form-control" id="author" name="author" required>
        </div>
        <div>
            <label for="totalStock" class="form-label">库存数量</label>
            <input type="text" class="form-control" id="totalStock" name="totalStock" required>
        </div>
        <div>
            <label for="description" class="form-label">描述</label>
            <textarea class="form-control" id="description" name="description" rows="3"></textarea>
        </div>
        <button type="button" id="updateBookButton">更新图书</button>
    </form>
</div>

<script>
    $(document).ready(function() {
        // 假设 bookId 是通过 URL 传递的
        // 获取当前页面的 URL
        var currentUrl = new URL(window.location);
        // 解析 URL 以获取查询参数
        var params = currentUrl.searchParams;
        // 获取 bookId 参数
        var bookId = params.get('bookId');
        $('#bookId').val(bookId);

        // 填充表单数据的函数（假设从后端获取数据）
        function populateForm(bookData) {
            $('#bookName').val(bookData.bookName);
            $('#bookPhoto').val(bookData.bookPhoto);
            $('#category').val(bookData.category);
            $('#author').val(bookData.author);
            $('#totalStock').val(bookData.totalStock);
            $('#description').val(bookData.description);
        }

        // 绑定更新图书按钮的点击事件
        $('#updateBookButton').click(function() {
            var updateFields = {
                bookName: $('#bookName').val(),
                bookPhoto: $('#bookPhoto').val(),
                category: $('#category').val(),
                author: $('#author').val(),
                totalStock: $('#totalStock').val(),
                description: $('#description').val()
            };

            $.ajax({
                url: '/api/v1/books/' + bookId,
                type: 'PATCH',
                contentType: 'application/json',
                data: JSON.stringify(updateFields),
                success: function(responseData) {
                    alert('图书更新成功');
                    window.location = '/bookslist';
                },
                error: function(xhr) {
                    alert('图书更新失败：' + xhr.statusText);
                }
            });
        });

        // 加载图书数据的函数（假设使用 bookId 从后端获取数据）
        function loadBookData() {
            $.ajax({
                url: '/api/v1/books/' + bookId,
                type: 'GET',
                success: function(bookData) {
                    populateForm(bookData);
                },
                error: function(xhr) {
                    alert('无法加载图书数据：' + xhr.statusText);
                }
            });
        }

        // 初始加载图书数据
        loadBookData();
    });
</script>
</body>
</html>